<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>日程模版</title>
    <!-- Custom fonts for this template-->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <!-- Page level plugin CSS-->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.css}" rel="stylesheet">
    <!-- Custom styles for this template-->
    <link th:href="@{/css/sb-admin.css}" rel="stylesheet">
    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <!-- Core plugin JavaScript-->
    <script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>
    <!-- Page level plugin JavaScript-->
    <script th:src="@{/vendor/datatables/jquery.dataTables.js}"></script>
    <script th:src="@{/vendor/datatables/dataTables.bootstrap4.js}"></script>
    <!-- Custom scripts for all pages-->
    <script th:src="@{/js/sb-admin.min.js}"></script>
    <!-- Demo scripts for this page-->
    <script th:src="@{/js/demo/datatables-demo.js}"></script>
</head>
<body  id="page-top">


<nav class="navbar navbar-expand navbar-dark bg-dark static-top">

    <a class="navbar-brand mr-1" th:href="@{/user/index}">日程云共享管理系统</a>


    <!-- Navbar -->
    <ul class="navbar-nav ml-auto ml-md-12" >

        <div th:if="${session.loginUser!=null}">
            <p th:text="${session.loginUser.getUsername()}" style="color:white"> </p>
        </div>
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-user-circle fa-fw"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">个人设置</a>
                <a class="dropdown-item" th:href="@{/reset-password}">修改密码</a>
                <div class="dropdown-divider"></div>
                <div th:if="${session.loginUser!=null}">
                    <a class="dropdown-item" th:href="@{/logout}" data-toggle="modal" data-target="#logoutModal">注销</a>
                </div>
            </div>
        </li>
    </ul>

</nav>

<div id="wrapper">

    <!-- Sidebar -->
    <ul class="sidebar navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>Dashboard</span>
            </a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" th:href="@{/share/community}">
                <i class="fas fa-fw fa-chart-area"></i>
                <span>用户共享社区</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/user/toScheduleframework}">
                <i class="fas fa-fw fa-chart-area"></i>
                <span>日程框架</span></a>
        </li>
        <li class="nav-item ">
            <a class="nav-link" th:href="@{/scheduletable/toScheduletable}">
                <i class="fas fa-fw fa-table"></i>
                <span>日程表</span></a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" th:href="@{/scheduletemplate/toTemplate}">
                <i class="fas fa-fw fa-table"></i>
                <span>日程模版</span></a>
        </li>
        <li class="nav-item " shiro:hasRole="admin">
            <a class="nav-link" th:href="@{/admin/list}">
                <i class="fas fa-fw fa-table"></i>
                <span>用户列表</span></a>
        </li>
    </ul>

    <div id="content-wrapper">

        <div class="container-fluid">

            <!-- Breadcrumbs-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Dashboard</a>
                </li>
                <li class="breadcrumb-item active">日程模版</li>
            </ol>



            <!-- Page Content -->

            <div class="card mb-3">
                <div class="card-header">
                    <div >
                    <i class="fas fa-table"></i>
                    日程模版
                        <div style="float: right">
                            <button class="btn btn-primary" id="template_add_modal_btn">创建日程模版</button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-responsive-md text-nowrap">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>创建者</th>
                                    <th>日程模版名</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="template:${msg.get('page').list}">
                                    <th th:text="${template.getId()}">id</th>
                                    <th th:if="${session.loginUser!=null}" th:text="${session.loginUser.getUsername()}">创建者</th>
                                    <th th:text="${template.getTemplateName()}">日程模版名</th>
                                    <th>
                                        <button class="btn btn-primary btn-sm view_btn" th:attr="view-id=${template.getId()}">查看</button>
                                        <button class="btn btn-primary btn-sm edit_btn" th:attr="edit-id=${template.getId()}">修改</button>
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer small text-muted" th:each="page:${msg.get('page')}">
                    <ul class="col-md-6">
                        <a>当前第[[${page.list.pageNum}]]页，总[[${page.list.pages}]]页，总[[${page.list.total}]]条记录</a>
                    </ul>
                    <nav aria-label="Page navigation example" style="float:right">
                        <ul class="pagination">
                            <li>
                            <li class="page-item"><a class="page-link" th:href="@{/scheduletemplate/toTemplate}">首页</a></li>
                            </li>
                            <div>
                                <div class="clearfix">
                                    <ul class="pagination m-b-5 pull-right">
                                        <li th:if="${page.hasPreviousPage}" class="page-item">
                                            <a class="page-link" th:href="@{'/scheduletemplate/toTemplate?pageNum='+${page.prePage}}" >
                                                <i class="fa fa-angle-left"></i>上一页
                                            </a>
                                        </li>
                                        <th:block th:each="nav:${page.navigatepageNums}">
                                            <li class="page-item" th:classappend="${nav==page.list.pageNum}?'active':''">
                                                <a class="page-link" th:text="${nav}" th:href="@{'/scheduletemplate/toTemplate?pageNum='+${nav}}"></a>
                                            </li>
                                        </th:block>
                                        <th:block th:if="${page.hasNextPage}">
                                            <li class="page-item">
                                                <a class="page-link" th:href="@{'/scheduletemplate/toTemplate?pageNum='+${page.nextPage}}">
                                                    下一页<i class="fa fa-angle-right"></i>
                                                </a>
                                            </li>
                                        </th:block>
                                    </ul>
                                </div>
                            </div>
                            <li>
                            <li class="page-item"><a class="page-link" th:href="@{'/scheduletemplate/toTemplate?pageNum='+${page.list.pages}}">末页</a></li>
                            </li>
                        </ul>
                    </nav>
                </div>
        </div>
        </div>
    </div>

        </div>
        <!-- /.container-fluid -->

        <!-- Sticky Footer -->
        <footer class="sticky-footer">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Copyright © Your Website 2019</span>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">确定退出登录吗?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">如果您准备结束当前会话，请在下面选择“退出”。</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                <a class="btn btn-primary" th:href="@{/logout}">退出</a>
            </div>
        </div>
    </div>
</div>

<!--添加日程模版的模态框-->
<div class="modal" id="templateAddModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">日程模版创建</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post"  th:object="${template}" th:action="@{/scheduletemplate/createTemplate}">
                    <!--日程模版名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程模版名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   th:field="*{templateName}" required>
                        </div>
                    </div>
                    <!-- 日程名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程名:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   th:field="*{name}">
                        </div>
                    </div>
                    <!--地点 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">地点</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  th:field="*{place}">
                        </div>
                    </div>
                    <!--备注 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">备注</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"  th:field="*{comments}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  >创建</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!--修改日程模版的模态框-->
<div class="modal" id="templateviewModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">日程模版查看</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form   >
                    <!--id -->
                    <div class="form-group row" hidden>
                        <label  class="col-sm-4 col-form-label">id</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="view_id" name="scheduletemplateId" disabled>
                        </div>
                    </div>
                    <!--日程模版名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程模版名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="view_templateName" name="templateName" disabled>
                        </div>
                    </div>
                    <!--日程名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="view_name" name="name" disabled>
                        </div>
                    </div>
                    <!--地点 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">地点</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="view_place" name="place" disabled>
                        </div>
                    </div>
                    <!--备注 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">备注</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="view_comments" name="comments" disabled>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--修改日程模版的模态框-->
<div class="modal" id="templateupdateModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">日程模版修改</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post"  th:action="@{/scheduletemplate/updateTemplate}" th:object="${template}">
                    <!--id -->
                    <div class="form-group row" hidden>
                        <label  class="col-sm-4 col-form-label">id</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="update_id" name="scheduletemplateId" th:field="*{id}">
                        </div>
                    </div>
                    <!--日程模版名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程模版名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="update_templateName" name="templateName" th:field="*{templateName}">
                        </div>
                    </div>
                    <!--日程名 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">日程名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="update_name" name="name" th:field="*{name}">
                        </div>
                    </div>
                    <!--地点 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">地点</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="update_place" name="place" th:field="*{place}">
                        </div>
                    </div>
                    <!--备注 -->
                    <div class="form-group row">
                        <label  class="col-sm-4 col-form-label">备注</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control"   id="update_comments" name="comments" th:field="*{comments}">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  >修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>

    //点击添加日程模版，打开模态框
    $("#template_add_modal_btn").click(function () {
        $('#templateAddModal').modal({
            backdrop: "static"
        });
    });

    //得到日程模版
    function getTemplate(templateId){
        $.ajax({
           url:"http://localhost:8088/scheduletemplate/getTemplate/"+templateId,
           type:"GET",
           success:function (result) {
                // console.log(result)
               var data=result.extend.template;
               // console.log(data);
               $("#update_id").val(data.id);
               $("#update_templateName").val(data.templateName);
               $("#update_name").val(data.name);
               $("#update_place").val(data.place);
               $("#update_comments").val(data.comments);

               $("#view_id").val(data.id);
               $("#view_templateName").val(data.templateName);
               $("#view_name").val(data.name);
               $("#view_place").val(data.place);
               $("#view_comments").val(data.comments);
           }
        });
    };

    //点击修改日程模版按钮，打开模态框
    $(document).on("click",".edit_btn",function () {
        getTemplate($(this).attr("edit-id"));
        $("#templateupdateModal").modal({
            backdrop:"static"
        });
    })

    //点击查看日程模版按钮，打开模态框
    $(document).on("click",".view_btn",function () {
        getTemplate($(this).attr("view-id"));
        $("#templateviewModal").modal({
            backdrop:"static"
        });
    })

</script>

</body>
</html>